<template>
  <div id="app">
    <!-- 登录页不需要布局 -->
    <template v-if="$route.path === '/login'">
      <router-view/>
    </template>

    <!-- 其他页面使用完整布局 -->
    <template v-else>
      <el-container style="height: 100%; width: 100%;">
        <!-- 侧边栏 -->
        <el-aside width="200px" style="background-color: #f0f7ff; color: #333; box-shadow: 2px 0 5px rgba(0,0,0,0.1);">
          <div class="logo-container" style="height: 60px; line-height: 60px; text-align: center; font-size: 18px; font-weight: bold; color: #3B82F6;">
            晨诺贝贝管理系统
          </div>
          <el-menu router :default-active="activeMenu" class="el-menu-vertical-demo" background-color="#f0f7ff" text-color="#4B5563" active-text-color="#1D4ED8">
            <el-menu-item index="1" route="/productManagement" v-if="userInfo && userInfo.username === 'yunying'">
              <i class="el-icon-s-home"></i>
              <span slot="title">产品管理</span>
            </el-menu-item>
            <el-menu-item index="2" route="/product-attribute">
              <i class="el-icon-s-home"></i>
              <span slot="title">规格属性</span>
            </el-menu-item>

            <!-- 对账单菜单 - 统一入口 -->
            <el-menu-item index="3" route="/billing">
              <i class="el-icon-document"></i>
              <span slot="title">对账单管理</span>
            </el-menu-item>

            <el-menu-item index="4" route="/coupon-management" v-if="userInfo && userInfo.username === 'yunying'">
              <i class="el-icon-ticket"></i>
              <span slot="title">优惠券管理</span>
            </el-menu-item>
            <el-menu-item index="5" route="/about">
              <i class="el-icon-info"></i>
              <span slot="title">关于系统</span>
            </el-menu-item>
            <el-menu-item index="6" @click="handleMenuClick('/qualification-audit')" v-if="userInfo && userInfo.username === 'yunying'">
              <i class="el-icon-check"></i>
              <span slot="title">资质审核</span>
            </el-menu-item>
            <el-menu-item index="7" @click="handleMenuClick('/order-management')" v-if="userInfo && userInfo.username === 'supplier'">
              <i class="el-icon-document"></i>
              <span slot="title">订单管理</span>
            </el-menu-item>
            <el-menu-item index="8" @click="handleMenuClick('/qualification-submit')" v-if="userInfo && userInfo.username === 'supplier'">
              <i class="el-icon-upload"></i>
              <span slot="title">提交资质</span>
            </el-menu-item>
            <el-menu-item index="9" @click="handleMenuClick('/yunying-statistics')" v-if="userInfo && userInfo.username === 'yunying'">
              <i class="el-icon-pie-chart"></i>
              <span slot="title">运营统计</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-container>
          <!-- 顶部导航栏 -->
          <el-header style="background-color: #ffffff; border-bottom: 1px solid #BFDBFE; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);">
            <div style="font-size: 16px; font-weight: bold;">产品管理系统</div>
            <div style="display: flex; align-items: center;">
              <div v-if="!userInfo" style="margin-right: 15px; display: none;">
                <el-select v-model="role" placeholder="请选择角色登录">
                  <el-option label="供应商" value="supplier"></el-option>
                  <el-option label="运营商" value="yunying"></el-option>
                </el-select>
                <el-button type="primary" size="small" @click="login" style="margin-left: 10px;">登录</el-button>
              </div>
              <div v-else style="margin-right: 15px;">
                <span style="margin-right: 10px;">{{ userInfo.username !== 'yunying' ? '供应商' : '运营商' }}</span>
                <el-button type="danger" size="small" @click="logout">退出登录</el-button>
              </div>
              <img :src="userInfo ? userInfo.useravatar : '@/assets/logo.png'" alt="用户头像" style="width: 36px; height: 36px; border-radius: 50%;">
            </div>
          </el-header>

          <!-- 主内容区域 -->
          <el-main style="padding: 20px;">
            <router-view/>
          </el-main>
        </el-container>
      </el-container>
    </template>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo']),
    role() {
      return this.userInfo ? this.userInfo.userType : 'supplier';
    }
  },
  data() {
    return {
      activeMenu: '1'
    }
  },
  created() {

  },
  watch: {
    '$route': function() {
      this.updateActiveMenu();
    }
  },
  methods: {

    updateActiveMenu() {
      const path = this.$route.path
      if (path === '/') {
        this.activeMenu = '1'
      } else if (path === '/product-attribute') {
        this.activeMenu = '2'
      } else if (path === '/billing' || path === '/supplier/billing' || path === '/yunying/billing') {
        this.activeMenu = '3'
      } else if (path === '/coupon-management') {
        this.activeMenu = '4'
      } else if (path === '/about') {
        this.activeMenu = '5'
      } else if (path === '/qualification-audit') {
        this.activeMenu = '6'
      } else if (path === '/order-management') {
        this.activeMenu = '7'
      } else if (path === '/qualification-submit') {
        this.activeMenu = '8'
      }
    },
    handleMenuClick(path) {
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
    },
    logout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const token = localStorage.getItem('token');
        if (token) {
          // 调用后端退出接口
            this.$http.post('/user/logout', {}).then(() => {
            // 清除本地存储的token
            localStorage.removeItem('token');
        localStorage.removeItem('userInfo');
        // 跳转到登录页
        this.$router.push('/login');
            this.$message.success('退出成功');
          }).catch(error => {
            console.error('退出失败:', error);
            this.$message.error('退出失败，请重试');
          });
        } else {
          // 如果没有token直接跳转到登录页
          this.$router.push('/login');
        }
      }).catch(() => {
        this.$message.info('已取消退出');
      });
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.el-aside {
  overflow: auto;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-header {
  height: 60px !important;
  line-height: 60px !important;
}

.el-main {
  padding: 0;
  overflow: auto;
  height: calc(100vh - 60px);
  background-color: #F9FAFB;
  width: 100%;
  box-sizing: border-box;
}
html{
  height: 100%;
  width: 100%;
  overflow: hidden;
}
body{
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* 解决Element UI样式问题 */
.el-menu-vertical-demo .el-menu-item {
  height: 50px;
  line-height: 50px;
}

.el-select {
  width: 120px;
}

.el-header .el-button {
  margin-left: 10px;
}
</style>
